<template>
  <el-container class="container">
    <!-- 左侧栏 -->
  <el-aside width="200px">
    <div class="logo"></div>
    <!-- 导航菜单 -->
    <!-- default-active="1" 通过el-menu-item的index值来激活菜单选项 -->
    <el-menu style="border-right:none" background-color="#234" text-color="#fff"  :default-active="$route.path"
    router>
    <!-- router 开启路由功能 -->
    <!-- $route.path获取当前路径地址,把当前路径地址赋值给default-active -->
      <el-menu-item index="/">
        <i class="el-icon-s-home"></i>
        <span slot="title">数据概览</span>
      </el-menu-item>
      <el-menu-item index="/article">
        <i class="el-icon-document"></i>
        <span slot="title">内容管理</span>
      </el-menu-item>
      <el-menu-item index="/publish">
        <i class="el-icon-s-promotion"></i>
        <span slot="title">发布文章</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <span style="margin-right:10px">{{user.name||user.mobile}}</span>
       <el-link :underline="false" icon="el-icon-unlock" @click="loginout()">退出</el-link>
    </el-header>
    <!-- 中间部分 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import auth from '@/utils/auth'
export default {
  name: 'Layout',
  data () {
    return {
      // 获取用户信息对象
      user: {}
    }
  },
  async created () {
    const res = await this.$http.get('/v1_0/user/profile')
    // console.log(res.data.data)
    this.user = res.data.data
  },
  methods: {
    loginout () {
      auth.delToken()
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped >
.container{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .el-aside{
    background: #234;
     .logo {
      background: url('../assets/logo.png') no-repeat center / 140px auto;
      width: 100%;
      height: 60px;
    }
  }
  .el-header{
    border-bottom: 1px solid #000;
    display: flex;
    line-height: 60px;
    justify-content: flex-end;
  }
}
</style>
